<template>
	<div class="auto-fill">
		<div class="padding-20">
			<el-row :gutter="20" class="cell-group">
				<el-col :span="20" v-for="(page, index) in pages" :key="index">
					<aiText class="cell-group-card" :card="page"></aiText>
				</el-col>

				<el-col :span="20" v-for="(page, index) in pages2" :key="index">
					<aiEchart class="cell-group-card" :card="page"></aiEchart>
				</el-col>
			</el-row>
			<el-row class="row-option margin-t-20">
				<div class="float-left">
					<el-button type="primary" :class="{ 'is-plain': buttonValue != 0 }"
						@click="changeType(0)">未开始</el-button>
					<el-button type="primary" :class="{ 'is-plain': buttonValue != 1 }"
						@click="changeType(1)">进行中</el-button>
					<el-button type="primary" :class="{ 'is-plain': buttonValue != 2 }"
						@click="changeType(2)">已结束</el-button>
				</div>
				<div class="float-right">
					<el-button type="primary" @click="goAiPlanning">AI策划</el-button>
				</div>
			</el-row>
		</div>
		<div class="row-lists auto-fill-content auto-fill-content--y padding-20 clear-padding--top"
			v-if="planValueLists.length > 0">
			<plan-item @status-change="onStatusChange" v-for="(planList, index) in planValueLists" :item-list="planList" :key="index"></plan-item>
		</div>
		<el-empty class="vi-empty-center" description="数据为空" v-else></el-empty>
		<div class="vi-container padding-20">
			<el-pagination class="float--right" background layout="prev, pager, next" v-if="planValueLists.length > 0"
				@current-change="loadMySelectList" v-model:current-page="pager.page" :page-size="pager.size"
				:total="total" />
		</div>
	</div>
</template>
<script lang="ts" name="work-planning" setup>
import aiText from "/@/components/card/aiText.vue";
import aiEchart from "/@/components/card/aiEchart.vue"
import planItem from "/$/planning/components/planItem.vue"
import { ElMessage } from "element-plus";
import { reactive, ref, onMounted } from "vue";
import { router, service } from "/@/cool";
import { config } from '/@/utils/global';
let pages = reactive([{
	imgUrl: '/images/001.png',
	textTop: '新增客群',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#4E68B7'
}, {
	imgUrl: '/images/002.png',
	textTop: '过期客群',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#91CC75'
}, {
	imgUrl: '/images/003.png',
	textTop: '未处理重点客群',
	textMid: '',
	textTip: '',
	textContent: '',
	color: '#FAC858'
}])
let pages2 = reactive([{
	imgUrl: '/images/icon01.png',
	textTop: '客群变化趋势图',
	textMid: '',
	textTip: '',
	data: [],
	type: 1
}, {
	imgUrl: '/images/icon01.png',
	textTop: '潜客占比',
	textMid: '',
	textTip: '',
	data: [],
	type: 2
}])
let buttonValue = ref(0);
const getChart = async () => {
	await service.campaign.plan.getChart({}).then(res => {
		pages[0].textMid = res.planCount;
		pages[0].textTip = res.heightCount;
		pages[0].textContent = '重点客群';
		pages[1].textMid = res.oldCount;
		pages[1].textTip = res.oldHeightCount;
		pages[1].textContent = '重点客群';
		pages[2].textMid = res.count;
		pages[2].textTip = res.oldRate;
		pages[2].textContent = '较昨日增长';
		pages2[0].data = res.planList;
		pages2[1].data = res.planPin;
		pages2[1].textTip = res.planRate;
	})
}
let planValueLists = ref<any[]>([]);
const pager = reactive({
	page: 1,
	size: config.PAGE_SIZE,
	status: buttonValue.value
})
let loading = ref<boolean>(false);
let total = ref<number>(0)
//获取客群信息
const getMySelect = async () => {
	let result = await service.campaign.plan.getMySelect(pager).catch((error) => {
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		loading.value = false;
		return;
	}).finally(() => {
		loading.value = false;
	});
	await getChart();
	planValueLists.value = result.records;
	total.value = result.totalRow;
}
const loadMySelectList = (value: number) => {
	pager.page = value;
	getMySelect();
}
onMounted(() => {
	getMySelect();
})
const onStatusChange=()=>{
	getMySelect();
}
const changeType = (index: number) => {
	buttonValue.value = index;
	pager.status = buttonValue.value;
	getMySelect();
}
const goAiPlanning = () => {
	router.push("/work/planning/select-customer")
}
</script>
<style>
.row-error {
	text-align: center
}
</style>
